<template>
  <div class="form-par">
    <div class="form">
      <div>
        <label>
          <i class="fa fa-user-o"></i>
          <input type="text" name="phone" placeholder="请输入您的手机号码" v-model="phone" autocomplete="off">
        </label>
      </div>
      <div>
        <label>
          <i class="fa fa-key"></i>
          <input type="text" name="password" placeholder="请输入您的登录密码" v-model="loginPwd" autocomplete="off">
        </label>
      </div>
      <div class="btn-par">
        <input type="submit" v-if="!loading" value="登录" @touchstart="login">
        <input type="submit" v-if="loading" value="登录中...">
      </div>
    </div>
    <div class="bottom-btn clear">
      <router-link to="/loginRegister/register">立即注册</router-link>
      <router-link to="/loginRegister/forgotPassword">忘记密码?</router-link>

    </div>
  </div>
</template>

<script>
  import {md, validMsg, falseHints, getErrMsg} from "../../assets/js/common";
  import {getData} from '../../api/index'

  export default {
    name: "register",
    data() {
      return {
        phone: "",
        loginPwd: "",
        loading: false,
      }
    },
    methods: {
      /*手机号码验证*/
      phoneValidate: function () {
        let phoneReg = validMsg().validReg.phoneReg;
        if (!this.phone) {
          return validMsg().message.noPhone;
        } else if (this.phone && !phoneReg.test(this.phone)) {
          return validMsg().message.errPhone
        }
      },
      /*密码验证*/
      passwordValidate: function () {
        if (!this.loginPwd) {
          return validMsg().message.noPassword
        }
      },
      login: function () {
        let errorMsg = this.phoneValidate() + "," + this.passwordValidate();
        let needErrArr = getErrMsg(errorMsg);
        if (needErrArr.length > 0) {
          falseHints(needErrArr[0])
        } else {
          if (!this.loading) {
            getData({
              tar: this,
              url: "api/api/postLogin",
              method: "POST",
              data: {
                phone: this.phone,
                password: md(this.loginPwd)
              }
            }).then((response) => {
              this.loading = false;
              console.log(response);
            }).catch((error) => {
              this.loading = false;
            })

          }
        }


      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/loginReg.css";
</style>
